<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2024/7/2
  Time: 15:44
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>成绩管理</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }

        /* 设置单元格边框和内边距 */
        td,
        th {
            border: none;
            padding: 10px;
            text-align: center;
        }

        /* 设置表头样式 */
        th {
            background-color: #f2f2f2;
        }

        /* 使用nth-child选择器设置奇数行背景颜色 */
        tr:nth-child(odd) {
            background-color: pink;
            /* 浅灰色或其他颜色 */
        }

        table {
            width: 80%;
            /* 或者设置一个具体的宽度值，如 80% */
            border-collapse: collapse;
            margin-top: 30px;
            /* 上下外边距为20px，左右外边距自动，使表格水平居中 */
            margin-left: 130px;
        }

        input {
            width: 80px;
            height: 25px;
            padding-right: 20px;
        }

        a {
            text-decoration: none;
        }

        /*a:hover {*/
        /*    background-color: white;*/
        /*}*/
        body {
            background-image: url("image/2.jpg");
        }

        .hidden {
            display: none;
        }

        .form-container {
            display: flex;
            justify-content: space-between;
            /* 在元素之间分配空间 */
            align-items: center;
            /* 垂直居中 */
            padding-top: 20px;
        }

        .search-form,
        .add-form {
            display: flex;
            align-items: center;
        }

        .search-form input,
        .search-form button,
        .add-form input,
        .add-form button {
            margin-right: 10px;
            /* 元素之间的间隔 */
        }

        .add-form input[type="text"] {
            flex: 1;
            /* 使输入框根据需要扩展 */
        }
    </style>
</head>
<body>
<div style="width: 100%;height: 40px;background-color:pink">
    <h3 style="color:white;padding-left: 20px;padding-top: 8px;"><a href="firstpage.jsp" style="color:white;" onmouseover="this.style.color='black';" onmouseout="this.style.color='white';">首页</a>/成绩管理</h3>
</div>
<div style="width: 100%;height: 20px;background-color:paleturquoise"> </div>

<div class="form-container">
    <div class="search-form">
        <input type="text" id="searchInput" style="width: 140px; height: 25px;" placeholder="输入学号查询...">
        <button type="button" onclick="searchTable()"
                style="color: white; background-color: dodgerblue; font-size: 16px; height: 30px; width: 80px;">查询</button>
    </div>

    <div class="add-form" style="text-align: right;">
        <input type="text" id="studentId" placeholder="学号" style="width: 100px;">
        <input type="text" id="studentName" placeholder="姓名" style="width: 100px;">
        <input type="text" id="studyYear" placeholder="学年学期" style="width: 100px;">
        <input type="text" id="sourceId" placeholder="课程号" style="width: 100px;">
        <input type="text" id="sourceName" placeholder="课程名" style="width: 100px;">
        <input type="text" id="score" placeholder="成绩" style="width: 100px;">
        <button type="button" onclick="addClass()"
                style="color: white; background-color: dodgerblue; font-size: 16px; height: 30px; width: 80px;">添加</button>
    </div>
</div>

<table id="studentTable">
    <thead>
    <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>学年学期</th>
        <th>课程号</th>
        <th>课程名</th>
        <th>成绩</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>2210705240</td>
        <td>金贤俊</td>
        <td>2023-2024-02</td>
        <td>CS00001</td>
        <td>Web编程</td>
        <td>66</td>
        <td>
            <button type="button" onclick="editRow(this)">修改</button>
            <button type="button" onclick="deleteRow(this)">删除</button>
        </td>
    </tr>
    <tr>
        <td>2210705240</td>
        <td>张三会</td>
        <td>2023-2024-02</td>
        <td>CS00001</td>
        <td>Web编程</td>
        <td>99</td>
        <td>
            <button type="button" onclick="editRow(this)">修改</button>
            <button type="button" onclick="deleteRow(this)">删除</button>
        </td>
    </tr>
    <tr>
        <td>2210705299</td>
        <td>刘青</td>
        <td>2023-2024-01</td>
        <td>CS00002</td>
        <td>音乐欣赏</td>
        <td>84</td>
        <td>
            <button type="button" onclick="editRow(this)">修改</button>
            <button type="button" onclick="deleteRow(this)">删除</button>
        </td>
    </tr>
    </tbody>
</table>
<div style="width: 100%;height: 60px;background-color:paleturquoise;position: fixed; bottom: 0; "> </div>
<script>
    function editRow(button) {
        const actionCell = button.closest('td');
        const row = actionCell.parentElement;
        const cells = Array.from(row.cells);

        cells.forEach((cell, index) => {
            if (index !== cells.length - 1) { // 排除最后一个单元格
                const input = document.createElement('input');
                input.value = cell.textContent;
                cell.innerHTML = '';
                cell.appendChild(input);
            }
        });

        // 可选：添加失去焦点时的事件监听器来保存数据
        cells.forEach((cell, index) => {
            if (index !== cells.length - 1) { // 排除最后一个单元格
                cell.firstChild.addEventListener('blur', function () {
                    // 这里可以编写保存数据的逻辑
                    console.log('编辑完成，新内容为：', this.value);
                    cell.textContent = this.value;
                }, {once: true});
            }
        });
    }

    function deleteRow(button) {
        // 找到包含按钮的行
        const row = button.closest('tr');
        // 从表格中删除行
        row.parentNode.removeChild(row);
        // 这里可以添加额外的逻辑，例如发送请求到服务器删除数据
    }
    function addClass() {
        // 获取表单输入值

        var studentId = document.getElementById('studentId').value;
        var studentName = document.getElementById('studentName').value;
        var studyYear = document.getElementById('studyYear').value;
        var sourceId = document.getElementById('sourceId').value;
        var sourceName = document.getElementById('sourceName').value;
        var score = document.getElementById('score').value;

        // 验证输入（这里只是简单的非空验证，实际可能需要更复杂的验证）
        if (studentId === '' || studentName === '' || studyYear === ''|| sourceId === ''|| sourceName === ''|| score === '') {
            alert('请填写所有字段！');
            return;
        }

        // 创建新的表格行和单元格
        var tableBody = document.querySelector('table tbody');
        var newRow = tableBody.insertRow(-1); // 在表格末尾插入新行

        // 创建并添加单元格
        var cellstudentId = newRow.insertCell(0);
        var cellstudentName = newRow.insertCell(1);
        var cellstudyYear = newRow.insertCell(2);
        var cellsourceId = newRow.insertCell(3);// 用于添加修改和删除按钮的单元格
        var cellsourceName = newRow.insertCell(4);
        var cellSscore =newRow.insertCell(5);
        var cellButtons = newRow.insertCell(6);// 用于添加修改和删除按钮的单元格
        // 填充单元格内容
        cellstudentId.textContent = studentId;
        cellstudentName.textContent = studentName;
        cellstudyYear.textContent = studyYear;
        cellsourceId.textContent = sourceId;
        cellsourceName.textContent = sourceName;
        cellSscore.textContent = score;

        // 添加修改和删除按钮
        var editButton = document.createElement('button');
        editButton.type = 'button';
        editButton.textContent = '修改';
        editButton.onclick = function () {
            // 在这里实现修改行的逻辑
            alert('点击了修改按钮，需要修改的行是: ' + cellId.textContent);
        };

        var deleteButton = document.createElement('button');
        deleteButton.type = 'button';
        deleteButton.textContent = '删除';
        deleteButton.onclick = function () {
            // 删除当前行
            tableBody.removeChild(newRow);
        };

        // 将按钮添加到单元格中
        cellButtons.appendChild(editButton);
        cellButtons.appendChild(document.createElement('span')).textContent = ' '; // 添加空格分隔按钮
        cellButtons.appendChild(deleteButton);

        // 清空表单
        document.getElementById('studentId').value = '';
        document.getElementById('studentName').value = '';
        document.getElementById('sourceId').value = '';
        document.getElementById('sourceName').value = '';
        document.getElementById('studyYear').value = '';
        document.getElementById('addForm').reset()
    };
    function searchTable() {
        var input, filter, table, tr, td, i, txtValue;
        input = document.getElementById("searchInput");
        filter = input.value.toUpperCase();
        table = document.getElementById("studentTable");
        tr = table.getElementsByTagName("tr");

        // 跳过表头
        for (i = 1; i < tr.length; i++) {
            td = tr[i].getElementsByTagName("td")[0]; // 假设姓名在第三列
            if (td) {
                txtValue = td.textContent || td.innerText;
                if (txtValue.toUpperCase().indexOf(filter) > -1) {
                    tr[i].style.display = "";
                } else {
                    tr[i].style.display = "none";
                }
            }
        }
        input.value = "";
    }
</script>
</body>
</html>
